
<template id="frame_layout_template" lang="html">
    <el-container style="height: 100vh;  ">
        <el-aside width="240px" style="background-color: #181820FF">
            <slot name="left" />
        </el-aside>

        <el-container>
            <el-header style="height: 50px; text-align: right;
             background-color: rgb(255,203,175) ;
             font-size: 12px">
                <slot name="header"/>
            </el-header>

            <el-main class="frame_layout_main" style="padding:10px;background-color: rgb(240,241,244);">
                <div class="main_bg_card">
                    <slot name="main" />
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    let frame_layout_template = document.getElementById('frame_layout_template')
    Vue.component('frame-layout',{
        template:frame_layout_template,

    })
</script>
<style>
    .frame_layout_main{
        /*border:1px solid red;*/
    }
    .frame_layout_main > .main_bg_card{
        padding:10px ;
        overflow:hidden;
        border-radius:5px;
        width:calc(100% - 20px);
        height:calc(100% - 20px);
        background-color: #fff;
    }
    *::-webkit-scrollbar{
        width: 4px;
        height: 4px;
    }
    *::-webkit-scrollbar-thumb{
        background-color: transparent;
        border-radius: 4px;
    }
    *:hover::-webkit-scrollbar-track{
        background-color: hsla(0,0%,53%,0.5);
    }
</style>